<template>
  <div class="mainView-dialog">
    <div class="iconfont logoicon icon-icon-test-copy-copy dialog-logo"></div>
    <div class="gray">{{$t('myWallet.receivableMsg')}}</div>
    <div class="accountName">
      {{ $store.state.app.scatter.identity ? $store.state.app.scatter.identity.accounts[0].name : '' }}
    </div>
    <div>
      <div id="qrcode" class="erweima"></div>
    </div>
    <div class="btnDiv">
      <el-button type="primary" plain class=""
        v-clipboard:copy="$store.state.app.scatter.identity ? $store.state.app.scatter.identity.accounts[0].name : ''"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError">
        {{$t('myWallet.copy')}}
      </el-button>
      <el-button type="primary" plain class="" @click="handleDownloadClick">
        {{$t('myWallet.down')}}
      </el-button>
      <a href="" id="downloadLink"></a>
    </div>
    <div class="msg">{{$t('myWallet.receiMsg')}}</div>
    <div class="tipOut">
      <div class="tip">
        <div class="tipTop"><span></span>{{$t('myWallet.reTip')}}</div>
        <div class="tipContent">1.{{$t('myWallet.reTip1')}}</div>
        <div class="tipContent">2.{{$t('myWallet.reTip2')}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import QRcode from 'qrcodejs2';

export default {
  data() {
    return {
      data: '',
    }
  },
  mounted() {
    this.handleQrcode();
  },
  methods: {
    handleQrcode() { // 二维码生成
      const qrcode = new QRcode(document.getElementById('qrcode'), {
        text: this.$store.state.app.scatter.identity ? this.$store.state.app.scatter.identity.accounts[0].name : '',
        width: 160,
        height: 160,
        correctLevel: QRcode.CorrectLevel.H
      });
      if (!qrcode) {
        this.$message.error(this.$t('myWallet.disableQRCode'));
      }
      // setTimeout(() => {
      //   // 获取base64的图片节点
      //   const img = document.getElementById('qrcode').getElementsByTagName('img')[0];
      //   // 构建画布
      //   const canvas = document.createElement('canvas');
      //   canvas.width = img.width;
      //   canvas.height = img.height;
      //   canvas.getContext('2d').drawImage(img, 0, 0);
      //   // 构造url
      //   const url = canvas.toDataURL('image/png');
      //   this.data = url;
      // }, 100);
    },
    handleDownloadClick() {
      // 获取base64的图片节点
      const img = document.getElementById('qrcode').getElementsByTagName('img')[0];
      // 构建画布
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext('2d').drawImage(img, 0, 0);
      // 构造url
      const url = canvas.toDataURL('image/png');
      // 构造a标签并模拟点击
      const downloadLink = document.getElementById('downloadLink');
      downloadLink.setAttribute('href', url);
      downloadLink.setAttribute('download', '二维码.png');
      downloadLink.click();
    },
    /* 复制保存账户信息 start */
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
    /* 复制保存账户信息 end */
  },
}
</script>

<style scoped lang="scss">
// dialog 样式
.mainView-dialog{
  color: white;
  text-align: center;
  padding-top: 20px;

  .erweima{
    width: 188px;
    height: 188px;
    margin: auto;
    text-align: center;
    background-color: #fff;
    padding-left: 14px;
    padding-top: 14px;
    border-radius: 5px;
  }

  .accountName{
    padding: 12px;
    font-weight: bold;
    font-size: 20px;
  }

  .btnDiv{
    margin: 22px 0px;
  }

  .tipOut{
    margin-top: 10px;
    text-align: left;
    background: #F5FAFE;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    .tip{
      padding: 20px 0px;
      width: 530px;
      margin: auto;

      .tipTop{
        color: #3F99DC;
        padding: 10px 0px;
      }

      .tipContent{
        padding: 2px 0px;
        color: gray;
      }
    }
  }
}
</style>
